<template>
    <div>
        <!-- 表格 -->
        <el-table
            ref="table"
            size="medium"
            empty-text="暂无数据"
            element-loading-text="给我一点时间"
            fit border highlight-current-row
            default-expand-all
            height="550"
            row-key="id"
            :indent="30"
            v-loading="loading"
            :data="tree"
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}">

            <el-table-column label="名称" prop="name" align="left" show-overflow-tooltip width="250"/>

            <el-table-column label="权限" align="left">
                <template slot-scope="scope" v-if="scope.row.permission">

                    <el-checkbox-group v-model="permissionCheckList">
                        <el-checkbox v-for="item in scope.row.permission"
                            :label="`${scope.row.id}-${item.id}`"
                            :key="`${scope.row.id}-${item.id}`">
                            {{ item.name }}
                        </el-checkbox>
                    </el-checkbox-group>

                </template>
            </el-table-column>

        </el-table>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
    data() {
        return {
            loading: false,
            tree: [],
            allPermissionList: [],      // 所有的权限
            permissionCheckList: [],    // 选中的权限
            role: null
        };
    },
    computed: {
        ...mapGetters(['roles'])
    },
    mounted() {
        console.log(this.roles);
        this.getListWithTree()
    },
    methods: {
        /**
         * 获取表格数据
         */
        async getListWithTree() {
            this.loading = true

            // 加载菜单
            const res = await this.$http({
                url: '/system/sysmenu/listWithTreeOnPermission',
                method: 'GET'
            })
            if (this.ResultMessage(res, false)) {
                this.tree = res.data
            }

            // 加载所有权限
            const resPermits = await this.$http({
                url: '/system/syspermission/list',
                method: 'GET'
            })
            if (this.ResultMessage(resPermits, false)) {
                this.allPermissionList = resPermits.data
            }

            let roleIds = []
            this.roles.forEach(v => {
                roleIds.push(v.id)
            })

            // 根据角色ID获取对应的权限
            if(roleIds && roleIds.length > 0){
                const resRolePermit = await this.$http({
                    url: '/system/sysuser/getRolesPermitByUserRoleIds',
                    method: 'POST',
                    data: roleIds
                })
                if (this.ResultMessage(resRolePermit, false)) {
                    this.permissionCheckList = []
                    if(resRolePermit.data) {
                        for(let item of resRolePermit.data) {
                            this.permissionCheckList.push(item.menuId+'-'+item.permissionId)
                        }
                    }
                }
            }
            this.loading = false
        }
    }
};
</script>

<style lang="scss" scoped></style>
